<template>
  <div class="app-container">
    <el-form inline>
      <!-- <el-form-item label="用户名称">
        <el-input v-model="query.arg1" clearable/></el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="query.arg2" clearable>
          <el-option label="在线" value="1" />
          <el-option label="下线" value="2" /></el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="danger" icon="el-icon-plus">新增</el-button>
        <el-button type="warning" icon="el-icon-upload2">导出</el-button></el-form-item>
    </el-form>
    <page-table ref="table" :fetch="getTableList" :query="queryParams" :show-header="false">
    <el-table-column label="模板名称">
        <template slot-scope="{row}">
            <div class="table-card">
                <div class="card-item card-img">
                    <img :src="row.images" />
                </div>
                <div class="card-item card-content">
                    <div><span class="label"></span><span class="value">玩转龙支付 观影10元购</span></div>
                    <div><span class="label">活动状态：</span><span class="value">进行中</span></div>
                    <div><span class="label">活动时间：</span><span class="value">2018.10.01-2018.12.31</span></div>
                    <div><span class="label">创建人：</span><span class="value">某某某</span></div>
                    <div><span class="label">每周：</span><span class="value">一、三、五</span></div>
                    <div><span class="label">最近修改：</span><span class="value">某某某</span></div>
                    <div><span class="label">每天：</span><span class="value">10:00:00-10:30:00</span></div>
                    <div><span class="label">更新时间：</span><span class="value">2018.10.01</span></div>
                </div>
                <div class="card-item card-button">
                    <el-button type="text" @click="editObj(row)">查看活动内容</el-button>
                    <el-button type="text" @click="deleteObj(row)">查看活动数据</el-button>
                    <el-button type="text" @click="editObj(row)">查看活动链接</el-button>
                    <el-dropdown trigger="click" placement="bottom">
                        <span class="el-dropdown-link">
                                                 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看奖品</el-dropdown-item>
                            <el-dropdown-item>数据同步</el-dropdown-item>
                            <el-dropdown-item>暂停活动</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </template>
      </el-table-column>
    </page-table>
  </div>
</template>

<script>
import { getExamplePageList } from '@/api/document'
export default {
  data () {
    return {
      queryParams: {}
    }
  },
  methods: {
    getTableList (query) {
      return getExamplePageList(query)
    },
    refreshTable () {
      this.$refs.table.refresh()
    },
    deleteObj (row) {
      this.$confirm(
        `是否删除【${row.col1}】,删除角色将同时关闭角色下的用户？`,
        '删除提示',
        { type: 'warning' }
      ).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.refreshTable()
      })
    },
    editObj (row) {
      console.log('编辑')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
